<template>
  <el-card class="box-card" style="width: 100%">  
   <div style="text-align: center;" slot="header" class="clearfix">
      <el-form :inline="true" :model="macIo">
         <el-form-item label="搜索" :label-width="formLabelWidth">
          <el-select size="small"  v-model="macIo.typeId" placeholder="请选择查看" @change="selMacIoChuRu()">
          <el-option label="全部" value=0>全部</el-option>
          <el-option label="入库" value=1>入库</el-option>
          <el-option label="出库" value=2>出库</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="macIo.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始注册日期"
            end-placeholder="结束注册日期"
            value-format="yyyy-MM-dd HH-mm-ss"
            >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="showMacIoList"
            ><i class="el-icon-search"></i
          ></el-button>
        </el-form-item>
      </el-form>
    </div>


    <el-table :data="macIoList" stripe style="width: auto">
        <el-table-column prop="id" label="编号" > </el-table-column>
         <el-table-column prop="num" label="工单编号" > </el-table-column>
        <el-table-column prop="macTypeName"  label="设备类型" ></el-table-column>   
         <el-table-column prop="maciSerialNum" label="设备序列号"></el-table-column> 
         <el-table-column prop="empNum" label="设备申请人" ></el-table-column> 
      <el-table-column prop="type" label="设备出入库类型">
        <template  slot-scope="scope">
          <div v-if="scope.row.type == 1">新采购</div>
          <div v-if="scope.row.type == 2">客户</div>
          <div v-if="scope.row.type == 3">自备</div>
          <div v-if="scope.row.type == 4">工程调用</div>
          <div v-if="scope.row.type == 5">损坏</div>
        </template>
      </el-table-column>
         <el-table-column prop="outDate1" label="出库时间" ></el-table-column> 
         <el-table-column prop="inOut1" label="入库时间"></el-table-column>      
         <el-table-column prop="shuliang" label="设备出入库数量"></el-table-column> 
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="macIo.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="macIo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        style="text-align: center;"
      >
      </el-pagination>
  </el-card>
</template>



<script>
export default {
  data() {
    return {
        macIoList:[],
      page: {
        pageSizes: [5, 10, 20, 50, 100], //下拉列表中的数组
        total:0, //一共有多少条数据
      },
      macIo: {
        currentPage: 1, //代表当前页
        pageSize: 5, //代表每页显示多少条数据
        typeId:"",
        dateRange: [],      
      },
    };
  },
  methods: {
    handleSizeChange(val) {
      //当每页数据改变时
      this.showMacIoList.pageSize = val;
      this.showMacIoList();
    },
    handleCurrentChange(val) {
      //当点击页码时
      this.macinfo.currentPage = val;
      this.showMacIoList();
    },
    selMacIoChuRu(){
        this.showMacIoList()
    },
    showMacIoList(){
        this.$axios.post("/macio/selAllMacIo",this.macIo).then((res) => {
        this.macIoList = res.data.data.macIoList;  
        this.page.total = res.data.data.total;    
        this.macIo.dateRange=[];
        
      });
    },
    
  },
  mounted(){
    this.showMacIoList();
   
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>